Displaying Graphs on a Mobile Device |
|
You can display graphs on a mobile device using the HTML5 SDK by integrating with charting toolkits such as Fusion Charts or Google Visualization.
You can do any of the following:
- To view the data in a graph, you can use the $.cordys.ajax plug-in to retrieve the data and then bind the data to the graph.
- To display the same data and allow modification, you can use the $.cordys.model plug-in and bind it with the data and the graph.
The following examples illustrate the usage of Google Visualization and Fusion Charts respectively to display the data:
Example 1
The following code snippet retrieves all the customers from the Northwind Database and displays a pie chart of the number of customers by their country:
Displaying Graphs using Google Visualization
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Customers By Region</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="/cordys/thirdparty/jquery/jquery.mobile.min.css" rel="stylesheet"/>
<script src="/cordys/thirdparty/jquery/jquery.js"/>
<script src="/cordys/thirdparty/jquery/jquery.mobile.min.js"/>
<script src="/cordys/wcp/flash/fusion/fusioncharts.js" type="text/javascript"/>
<script
src="/cordys/wcp/flash/fusion/FusionCharts.jqueryplugin.js" type="text/javascript"/>
<script src="/cordys/thirdparty/knockout/knockout.js" type="text/javascript"/>
<script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"/>
<script type="text/javascript">
$(function() {
// Create a new model
customerModel = new $.cordys.model({
objectName: "Customers", // Name of the Business Object
context: $("#customersList")[0], // Where to bind the data to
isReadOnly:false,
read: {
// Settings for the read method
async:false,
namespace: "http://schemas.cordys.com/NW",
dataType: "json",
method: "GetCustomersObjects",
// Parameters for the method
parameters: {
fromCustomerID: "aaaaaaaa",
toCustomerID: "ZZZZZZZZ"
}
}
});
// Call the read method. This fires the method with the namespace and parameters as specified in the read settings above.
customerModel.read().done( function(){
var customersByCountry = {};
var customers = customerModel.Customers();
// Create a collection of the customers by country
for (var customerKey in customers)
{
var customer = customers[customerKey];
var country = customer.Country();
if (! customersByCountry[country]){
customersByCountry[country] = [customer];
}
else{
customersByCountry[country].push(customer);
}
}
// Create the dataArray required for Fusion Chart
var dataArray = [];
for (var country in customersByCountry)
{
dataArray.push({'label':country, 'value':customersByCountry[country].length, link:"j-setCurrentCountry-" + country});
}
// Create complete chart data with schema required for Fusion Chart
var chartData = {
"data" : dataArray
}
// Create the Chart
$("#chartContainer").insertFusionCharts({type: "Pie2D", dataSource: chartData, dataFormat: "json", width: "100%", height: "400px", id: "myChartID", renderer:'javascript'});
});
});
// Create an Observable for the selected country so that KO re-renders when a different country is selected
var selectedCountry = ko.observable();
// Called on clicking a Country in the Chart. Sets the current country
function setCurrentCountry(value){
selectedCountry(value);
return true;
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<!-- header -->
<div data-role="header" data-theme="b">
<h1>Customers By Country</h1>
</div>
<!-- content area -->
<div data-role="content" data-theme="b">
<div id="chartContainer" style="height:40%"/>
<ul data-bind="foreach:Customers" data-inset="true"
data-role="listview" data-theme="c" id="customersList">
<!-- ko if: selectedCountry() !=="undefined" && selectedCountry() === Country()-->
<li>
<h3 class="ui-li-heading" data-bind="text:CompanyName"/>
<p class="ui-li-desc">
<span data-bind="text:City"/>
<span data-bind="text:Country"/>
</p>
<p class="ui-li-desc" data-bind="text:Phone"/>
<p class="ui-li-desc" data-bind="text:Fax"/>
<p class="ui-li-desc" data-bind="text:ContactName"/>
</li>
<!-- /ko -->
</ul>
</div>
</div>
</body>
</html>
Example 2
The following code snippet retrieves all the products from the Northwind Database and displays a graph with the number of available units of each product in a bar graph:
Displaying Graphs using Fusion Charts
<html>
<head>
<title>Products</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="/cordys/thirdparty/jquery/jquery.mobile.min.css" rel="stylesheet"/>
<script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"/>
<script src="/cordys/thirdparty/jquery/jquery.mobile.min.js" type="text/javascript"/>
<script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"/>
<script src="http://www.google.com/jsapi" type="text/javascript"/>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
var productsModel;
function drawProductChart() {
productsModel = new $.cordys.model({
objectName: "Products",
read: {
namespace: "http://schemas.cordys.com/NW",
dataType: "json",
method: "GetProductsObjects",
parameters: {
fromProductID: "0",
toProductID: "99999"
}
}
});
productsModel.read().done( function(products) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Product');
data.addColumn('number', 'In Stock');
$.each(products, function(p) {
data.addRow([this.ProductName, parseInt(this.UnitsInStock)]);
});
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Products in stock",
width:"100%", height:"100%",
chartArea: {width:"70%", left:"50%",height:"90%"},
vAxis: {title: "Product", textStyle:{fontSize:10}},fontSize:10,
hAxis: {title: "In Stock"},
legend: {position:"left"}}
);
});
}
google.setOnLoadCallback(drawProductChart);
</script>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header" data-theme="b">
<h1>Products</h1>
</div>
<div data-role="content" data-theme="d">
<!-- Content comes here -->
<div id="visualization" style="width: 100%; height: 2000px"/>
</div>
</div>
</body>
</html>
Note:
- The example 2 above uses the HTML version of the Fusion Charts. If you want to display the Flash version, remove the renderer:"javascript" option while invoking the insertFusionCharts() API.
- You can click any country to display the customers from that country in a list.
- The supported version of the fusion chart is 3.2.4. Refer to the fusion chart documentation for more information on the various chart types and formats.
 |
|